<template>
  <div class="project">
    <!-- 雨量数据统计  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>雨量数据统计</div>
      </div> 
      <div class="warp warp1">
      <el-form :inline="true" :model="queryFrom" class="demo-form-inline" label-width="10px">
        <el-form-item label="">
          <el-select v-model="queryFrom.region" size="small" placeholder="请选择项目">
            <el-option label="常德省厅普适型检测项目" value="shanghai"></el-option> 
            <el-option label="常德普适型地灾检测(1170)" value="beijing"></el-option>
          </el-select>
        </el-form-item> 
        <el-form-item label=" "> 
          <el-date-picker v-model="queryFrom.value1" size="small" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label=" "> 
          <el-radio-group v-model="queryFrom.radio"  size="small">
            <el-radio-button label="10分钟"></el-radio-button>
            <el-radio-button label="1小时"></el-radio-button>
            <el-radio-button label="2小时"></el-radio-button>
            <el-radio-button label="3小时"></el-radio-button>
            <el-radio-button label="6小时"></el-radio-button>
            <el-radio-button label="最近一天"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label=" "> 
          <el-button type="primary" class="el-icon-view" size="small"> 查看图表</el-button>
          <el-button type="primary" class="el-icon-upload2" size="small"> 导出</el-button>
        </el-form-item>
      </el-form>
    </div>
      <el-table v-loading="loading" :data="configList">    
        <el-table-column label="地区" align="center" prop="point" />
        <el-table-column label="监测点名称" align="center" prop="pointName" :show-overflow-tooltip="true" />
        <el-table-column label="监测点编号" align="center" prop="deviceSn" :show-overflow-tooltip="true" />
        <el-table-column label="雨量值/mm" align="center" prop="rain" :show-overflow-tooltip="true" />
        <el-table-column label="统计开始时间" align="center" prop="startTime" :show-overflow-tooltip="true" />
        <el-table-column label="统计截止时间" align="center" prop="endTime" :show-overflow-tooltip="true" /> 
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <!-- <template slot-scope="scope"> -->
          <template> 
            <el-button size="mini" type="text">查看详情</el-button>   
          </template>
        </el-table-column>
      </el-table>   
      <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
    
    </div>
  </div>
</template>

<script>
export default {
data() {
  return { 
    queryFrom: {
      radio: "最近一天"
    },
    loading: false,
    configList: [
      { "rain": 0.0, "point": "鼎城区", "deviceSn": "430703010018", "startTime": "2024-02-03 10:36:09", "endTime": "2024-02-04 10:36:09", "pointName": "鼎城区双桥坪镇祝家当村3组青山岭滑坡" },
      { "rain": 0.0, "point": "鼎城区", "deviceSn": "430703010002", "startTime": "2024-02-03 10:36:09", "endTime": "2024-02-04 10:36:09", "pointName": "鼎城区蔡家岗镇雷公庙社区2组镇泰中学滑坡" }, 
      { "rain": 0.0, "point": "鼎城区", "deviceSn": "430703011127", "startTime": "2024-02-03 10:36:09", "endTime": "2024-02-04 10:36:09", "pointName": "鼎城区花岩溪管理处高峰村6组莫必文屋后滑坡" }, 
      { "rain": 0.0, "point": "鼎城区", "deviceSn": "430703011083", "startTime": "2024-02-03 10:36:09", "endTime": "2024-02-04 10:36:09", "pointName": "鼎城区花岩溪国家森林公园管理委员会花岩溪村1组礼仁溪滑坡" }, 
      { "rain": 0.0, "point": "鼎城区", "deviceSn": "63", "startTime": "2024-02-03 10:36:09", "endTime": "2024-02-04 10:36:09", "pointName": "鼎城区草坪镇三角堆村3组彭国清屋后滑坡" }
    ],
    total: 5,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    }, 
  }
},
methods:{
  getList(){}, 
}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/tablePage.scss";    
</style>